<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        #box{
        width: 100px;
        height: 100px;
        border:1px solid #ccc;
    }
    
    </style>
</head>

<body>
    <input type="button" value="点击按钮" id="btn">
    <input type="button" value="删除元素" id="del">
    <div id="box"></div>
    <script src="../jquery-1.12.4.js"></script>
    <script>
        //点击按钮在div中创建标签
        var btnObj = document.getElementById('btn')
        var boxObj = document.getElementById('box')
        var delObj = document.getElementById('del')
        btnObj.onclick = function () {
            //通过document.createElement的方式
            // var p = document.createElement('p')
            // boxObj.appendChild(p)
            // p.innerHTML = '我是新创建的p标签'

            //通过innerHTML的方式
           
                // boxObj.innerHTML += "<h3>我是创建的h3</h3>"
            
        }
        // delObj.onclick = function(){
        //     boxObj.removeChild(boxObj.firstChild)
        // }
        $("#btn").click(function () {
            // var str = "<h2>我是h2</h2>"
            // for (var i = 0; i < 5; i++) {
            //     $('#box').append('<h1>我是h1</h1>' + str)

            // }
            var p = document.createElement('p')
            $('#box').append(p)
            p.innerHTML = "我是p元素"
        })

        $('#del').click(function(){
            $("#box p:first").remove()
        })

    </script>
</body>

</html>